<template>
  <div class="content">
    <div class="block">
      <!--选择器-->
      <div class="date_filter">
        <el-date-picker
          v-model="datevalue"
          type="daterange"
          class="mydatepicker"
          format="yyyy-M-d"
          value-format="yyyy-M-d"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="fetchData()"
          @focus="showMask = true"
          @blur="showMask = false"
        />
        <div v-if="false" class="flex_row area_wrap" @click="selectArea">
          <span class="area_text">全部地区</span>
          <svg-icon icon-class="map" class="area_icon" />
        </div>
      </div>

      <!--巡检频次-->
      <div v-if="true" class="inspection_frequency">
        <div class="list_menu_wrap title_bg">
          <svg-icon class="title_icon" icon-class="personnel" />
          <el-tooltip content="点击可查看巡检频次详情" placement="top">
            <span class="title_name" @click="showCensusInfo('1')"
              >巡检频次</span
            >
          </el-tooltip>

          <span style="flex: 1" />
          <span
            class="title_btn"
            :class="{ title_btn_selected: flightSummaryType === 0 }"
            @click="changeInspectType(0)"
            >次数</span
          >
          <span
            class="title_btn"
            :class="{ title_btn_selected: flightSummaryType === 1 }"
            @click="changeInspectType(1)"
            >里程</span
          >
          <span
            class="title_btn"
            :class="{ title_btn_selected: flightSummaryType === 2 }"
            @click="changeInspectType(2)"
          >
            时长</span
          >
        </div>

        <div class="item_wrap">
          <div class="flex_row item">
            <svg-icon class="item_icon" icon-class="fly" />
            <div class="flex_column" style="flex: 1">
              <span class="item_title">{{ perDayTitle }}</span>
              <span class="item_content"
                >{{ perDayData }}
                <span class="item_unit">{{ perDayUnit }}</span>
              </span>
            </div>
          </div>
          <div class="flex_row item">
            <svg-icon class="item_icon" icon-class="line-chart" />
            <div class="flex_column" style="flex: 1">
              <span class="item_title">{{ totalTitle }}</span>
              <span class="item_content"
                >{{ totalData }}
                <span class="item_unit">{{ perDayUnit }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 预警统计 -->
      <div class="chart_wrap">
        <div class="sub_title">预警统计</div>
        <div
          v-show="!!flightSummaryData"
          ref="warning_chart"
          style="flex: 1; width: 100%"
        ></div>
        <div
          v-show="!flightSummaryData"
          class="noneData"
          style="flex: 1; width: 100%"
        >
          未查询到数据
        </div>
      </div>

      <!--事件统计-->
      <div class="eventContainer">
        <div class="list_menu_wrap title_bg">
          <svg-icon class="title_icon" icon-class="pie-chart2" />
          <span class="title_name">事件办结</span>
          <!-- @click="showCensusInfo('2')" -->
          <span style="flex: 1" />
          <span
            class="title_btn"
            :class="{ title_btn_selected: pieDataType === 0 }"
            @click="changeIssueType(0)"
            >类型</span
          >
          <span
            class="title_btn"
            :class="{ title_btn_selected: pieDataType === 1 }"
            @click="changeIssueType(1)"
            >归属地</span
          >
        </div>
        <div v-if="!!eventCompleteData" class="events">
          <!--项目-->
          <div class="eventMain eventTitle">
            <div class="eventContent eventContent1">总量</div>
            <div class="eventContent">办结量</div>
            <div class="eventContent">办结率</div>
          </div>
          <div class="eventBody">
            <div
              class="eventMain"
              v-for="(item, index) in eventCompleteData"
              :key="index"
            >
              <div class="eventContent eventContent1">
                <div class="eventText">
                  {{ item.tag_name }}
                </div>
                <div class="eventProgressBox">
                  <div
                    class="eventProgress"
                    :style="getProgressWrapStyle(item, index)"
                  >
                    <div
                      class="progress"
                      :style="getProgressStyle(item, index)"
                    >
                      {{ item.complete_issues || "" }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="eventContent">{{ item.total_issues }}</div>
              <div class="eventContent" v-if="!!item.total_issues">
                {{
                  ((item.complete_issues / item.total_issues) * 100).toFixed(2)
                }}%
              </div>
              <div class="eventContent" v-else>-</div>
            </div>
          </div>
        </div>
        <!-- 无数据的情况 -->
        <div class="noneData" v-else>未查询到数据</div>
      </div>

      <!--降本增效-->
      <div v-if="true" class="efficiencyContainer">
        <div class="list_menu_wrap title_bg">
          <svg-icon class="title_icon" icon-class="event" />
          <!-- <span class="title_name" @click="showCensusInfo('4')">降本增效</span> -->
          <span class="title_name">降本增效</span>
          <span style="flex: 1" />
        </div>
        <div class="efficiencyBody">
          <div class="efficiencyCard">
            <div class="efficiencyText">
              <div>
                <span class="efficiencyPerson">
                  {{ efficiencyData.person_times || 0 }}
                </span>
                人次
              </div>
              <div>
                <span class="efficiencyPerson">
                  {{ efficiencyData.mileage || 0 }}
                </span>
                公里
              </div>
            </div>
            <div class="efficiencyPic">
              <img src="@/assets/efficiencyPerson.png" alt="" />
              <div class="efficiencyPicText">代替人工</div>
            </div>
          </div>

          <div class="efficiencyCard">
            <div class="efficiencyText">
              <div>
                <span
                  class="efficiencySaving"
                  v-if="efficiencyData.cost_saving"
                >
                  {{ (+efficiencyData.cost_saving).toFixed(2) }}
                </span>
                <span class="efficiencySaving" v-else> 0.00 </span>
                万元
              </div>
            </div>
            <div class="efficiencyPic">
              <img src="@/assets/efficiencySaving.png" alt="" />
              <div class="efficiencyPicText">节约成本</div>
            </div>
          </div>

          <div class="efficiencyCard">
            <div class="efficiencyText">
              <div>
                <span
                  class="efficiencyCarbon"
                  v-if="efficiencyData.reduce_carbon_emissions"
                >
                  {{ (+efficiencyData.reduce_carbon_emissions).toFixed(2) }}
                </span>
                <span class="efficiencyCarbon" v-else> 0.00 </span>
                吨
              </div>
            </div>
            <div class="efficiencyPic">
              <img src="@/assets/efficiencyCarbon.png" alt="" />
              <div class="efficiencyPicText">减少碳排</div>
            </div>
          </div>
        </div>
      </div>

      <!--数据成果-->
      <div v-if="true" class="data_result">
        <div class="list_menu_wrap title_bg">
          <svg-icon class="title_icon" icon-class="pie-chart1" />
          <span class="title_name" @click="showCensusInfo('3')">数据成果</span>
          <span style="flex: 1" />
        </div>
        <div class="item_wrap">
          <div class="flex_row item">
            <svg-icon class="item_icon" icon-class="Camera" />
            <div class="flex_column" style="flex: 1">
              <span class="item_title">照片采集总数</span>
              <span class="item_content">
                {{ dataResultData.photo_count || 0 }}
              </span>
            </div>
          </div>
          <div class="flex_row item">
            <svg-icon class="item_icon" icon-class="video" />
            <div class="flex_column" style="flex: 1">
              <span class="item_title">视频总数</span>
              <span class="item_content">
                {{ dataResultData.video_count || 0 }}
              </span>
            </div>
          </div>
        </div>
        <div class="item_small_wrap">
          <div class="flex_row item">
            <svg-icon class="item_icon" icon-class="issue" />
            <div class="flex_column">
              <span class="item_title">问题总数</span>
              <span class="item_content">
                {{ dataResultData.issue_count }}
              </span>
            </div>
          </div>
          <div class="flex_row item">
            <svg-icon
              class="item_icon"
              style="padding: 2px"
              icon-class="airline"
            />
            <div class="flex_column">
              <span class="item_title">航线总数</span>
              <span class="item_content">{{
                dataResultData.airline_count
              }}</span>
            </div>
          </div>
          <div class="flex_row item">
            <svg-icon class="item_icon" icon-class="view360" />
            <div class="flex_column">
              <span class="item_title">全景总数</span>
              <span class="item_content">{{ dataResultData.qj_count }}</span>
            </div>
          </div>
          <div class="flex_row item">
            <svg-icon class="item_icon" icon-class="3D" />
            <div class="flex_column">
              <span class="item_title">三维总数</span>
              <span class="item_content">{{ dataResultData["3d_count"] }}</span>
            </div>
          </div>
        </div>
      </div>
      <!--    <span>模块1</span>-->
      <!--    <el-rate v-model="value1" :colors="colors"></el-rate>-->
    </div>
    <div v-if="showMask" class="full-mask" @click="showMask = false"></div>
  </div>
</template>

<script>
import {
  getDataResult,
  getFlightSummary,
  getReduceCostsIncreaseEfficiency,
  getEventComplete,
} from "@/api/kanban";
const flightPerDayTitle = ["日均巡检次数", "日均巡检里程", "日均巡检时长"];
const flightSummaryTitle = ["累计巡检次数", "累计巡检里程", "累计巡检时长"];
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      datevalue: [],

      // colors: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'],
      barColors: [
        "#39A9EC",
        "#3EC8CA",
        "#6071AF",
        "#907E32",
        "#826238",
        "#B55D32",
      ],
      pieColors: [
        "#FD6789",
        "#FFB368",
        "#FFD87A",
        "#71CDCD",
        "#61B6EF",
        "#70AD47",
      ],
      pieChart: undefined,
      warningChart: undefined,

      queryInspectParams: {
        type: 0,
      },
      queryIssueParams: { type: 0 },
      //
      flightSummaryData: {},
      perDayTitle: flightPerDayTitle[0],
      totalTitle: flightSummaryTitle[0],
      perDayData: 0,
      totalData: 0,
      perDayUnit: "",
      flightSummaryType: 0,
      //
      eventSummaryData: {},
      pieChartData: {},
      pieDataType: 0, // 0-类型 1-归属地
      //
      eventCompleteData: null,
      eventCompleteData11: null,
      eventCompleteData22: null,
      eventMax: 0,
      // 降本增效
      efficiencyData: {
        person_times: 48,
        mileage: 36200,
        cost_saving: 280.8,
        reduce_carbon_emissions: 0.59,
      },
      //
      dataResultData: {},

      showMask: false,
    };
  },
  mounted() {
    this.setDefaultDate();
    this.initCharts();
    setTimeout(() => {
      this.fetchData();
    }, 1000);
  },
  methods: {
    showCensusInfo(num) {
      this.$emit("showCensusInfo", num);
    },
    setDefaultDate() {
      const end = new Date();
      const endYear = end.getFullYear();
      let endMonth = (end.getMonth() + 1).toString();
      let endDay = end.getDate().toString();
      if (endMonth.length === 1) {
        endMonth = "0" + endMonth;
      }
      if (endDay.length === 1) {
        endDay = "0" + endDay;
      }
      const endStr = endYear + "-" + endMonth + "-" + endDay;
      //
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
      const startYear = start.getFullYear();
      let startMonth = (start.getMonth() + 1).toString();
      let startDay = start.getDate().toString();
      if (startMonth.length === 1) {
        startMonth = "0" + startMonth;
      }
      if (startDay.length === 1) {
        startDay = "0" + startDay;
      }
      const startStr = startYear + "-" + startMonth + "-" + startDay;
      this.datevalue = [startStr, endStr];
    },
    // ! 创建charts
    initCharts() {
      this.warningChart = this.$echarts.init(this.$refs.warning_chart);
    },
    // ! 选择器
    fetchData() {
      this.$bus.emit("view1_dateChange", this.datevalue);
      // ? 巡检频次 预警统计
      getFlightSummary({
        begin_date: this.datevalue[0],
        end_date: this.datevalue[1],
        dept_id: this.$store.getters.deptId,
      }).then((res) => {
        this.flightSummaryData = res.data;
        if (res?.data?.count?.total > 0) {
          const mileageTooLong = res.data.mileage.average_per_day > 10000;
          this.flightSummaryPerDayData = [
            res.data.count.average_per_day,
            mileageTooLong
              ? Math.round(res.data.mileage.average_per_day / 1000)
              : res.data.mileage.average_per_day,
            res.data.duration.average_per_day,
          ];
          this.flightSummaryTotalData = [
            res.data.count.total,
            mileageTooLong
              ? Math.round(res.data.mileage.total / 1000)
              : res.data.mileage.total,
            res.data.duration.total,
          ];

          this.flightSummaryPerDayUnit = [
            "次",
            res.data.mileage.average_per_day > 10000 ? "千米" : "米",
            "小时",
          ];
          //
          res.data.xDate = res.data.details.map((item) => {
            return item.day;
          });
          res.data.yCount = res.data.details.map((item) => {
            return item.count;
          });

          res.data.yMileage = res.data.details.map((item) => {
            if (res.data.mileage.average_per_day > 10000) {
              return Math.round(item.mileage / 1000);
            }
            return item.mileage;
          });
          res.data.yDuration = res.data.details.map((item) => {
            return item.duration;
          });

          this.setLineChartDate();
        } else {
          this.flightSummaryData = null;
          this.flightSummaryPerDayData = [0, 0, 0];
          this.flightSummaryPerDayUnit = ["次", "米", "小时"];
          this.flightSummaryTotalData = [0, 0, 0];
        }
        this.changeInspectType(0);
      });
      // ? 事件办结
      getEventComplete({
        begin_date: this.datevalue[0],
        end_date: this.datevalue[1],
        user_id: this.$store.getters.userId,
        dept_id: this.$store.getters.deptId,
      }).then((res) => {
        if (res.error_code == 0) {
          if (res.data) {
            this.eventCompleteData = res.data.scene_tags;
            this.eventCompleteData11 = res.data.scene_tags;
            this.eventCompleteData22 = res.data.block_tags;
          } else {
            this.eventCompleteData22 = null;
            this.eventCompleteData11 = null;
          }
        }
      });

      // ? 降本增效
      getReduceCostsIncreaseEfficiency({
        begin_date: this.datevalue[0],
        end_date: this.datevalue[1],
        dept_id: this.$store.getters.deptId,
      }).then((res) => {
        if (res.error_code == 0) {
          this.efficiencyData = res.data;
        }
      });

      // ? 数据结果
      getDataResult({
        dept_id: this.$store.getters.deptId,
      }).then((res) => {
        // { nest_ids: '6ec34e03-7385-4e9b-82db-126b0a3ec96f' }
        if (res.error_code === 0) {
          this.dataResultData = res.data;
        } else {
          this.dataResultData = {};
        }
      });
    },
    // ! 点击事件，切换事件办结类型
    changeIssueType(val) {
      // if (val === this.pieDataType) return;
      var _this = this;
      _this.pieDataType = val;

      let data = null;
      if (_this.pieDataType == 0) {
        _this.eventCompleteData = _this.eventCompleteData11;
        data = _this.eventCompleteData;
      } else {
        _this.eventCompleteData = _this.eventCompleteData22;
        data = _this.eventCompleteData;
      }
      this.eventMax = 0;
      data.forEach((event) => {
        this.eventMax =
          event.complete_issues > this.eventMax
            ? event.complete_issues
            : this.eventMax;
      });
    },

    // 事件办结 外背景
    getProgressWrapStyle(data, index) {
      let wrapPercent = (data.complete_issues / this.eventMax) * 100.0;
      var width;
      if (wrapPercent < 20) {
        width = "15%";
      } else {
        width = wrapPercent + "%";
      }
      const colorIndex = index % 6;
      return (
        "background-color:" + this.barColors[colorIndex] + ";width:" + width
      );
    },
    // 事件办结 内背景
    getProgressStyle(data, index) {
      const colorIndex = index % 6;
      return (
        " background: linear-gradient(to right," +
        this.barColors[colorIndex] +
        ", white 100%);width:" +
        ((data.complete_issues / data.total_issues) * 100).toFixed(2) +
        "%"
      );
    },
    // 每日巡检
    setLineChartDate() {
      let showY = [];
      if (!this.flightSummaryData) {
        return false;
      }
      if (this.flightSummaryType === 0) {
        showY = this.flightSummaryData.yCount;
      } else if (this.flightSummaryType === 1) {
        showY = this.flightSummaryData.yMileage;
      } else if (this.flightSummaryType === 2) {
        showY = this.flightSummaryData.yDuration;
      }
      //
      const option2 = {
        color: ["#1cc1ff", "#daa520"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "10%",
          top: 20,
          bottom: 20,
          right: "19%",
        },
        legend: {
          // data: ['预警数', '每日巡检次数'],
          data: [this.getLineChartTitle()],
          top: 0,
          left: 0,
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            show: true,
            axisTick: {
              alignWithLabel: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            // prettier-ignore
            // data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            data: this.flightSummaryData.xDate,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.getLineChartTitle(),
            nameTextStyle: {
              color: "#0000",
            },
            position: "right",
            alignTicks: true,
            splitLine: false,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter: "{value}" + this.getUnitByType(),
            },
          },
          {
            type: "value",
            name: "预警数",
            nameTextStyle: {
              color: "#0000",
            },
            position: "left",
            alignTicks: true,
            splitLine: false,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            // name: '每日巡检次数',
            name: this.getLineChartTitle(),
            type: "bar",
            data: showY,
          },
          // {
          //   name: '预警数',
          //   smooth: true,
          //   type: 'line',
          //   yAxisIndex: 1,
          //   data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          // }
        ],
      };
      option2 && this.warningChart.setOption(option2);
    },
    // 每日巡检标题
    getLineChartTitle() {
      if (this.flightSummaryType === 0) {
        return "每日巡检次数";
      } else if (this.flightSummaryType === 1) {
        return "每日巡检里程";
      } else if (this.flightSummaryType === 2) {
        return "每日巡检时长";
      }
    },
    //
    getUnitByType() {
      if (this.flightSummaryType === 0) return "次";
      if (this.flightSummaryType === 1) {
        if (this.flightSummaryData.mileage.average_per_day > 10000) {
          return "千米";
        }
        return "米";
      }
      if (this.flightSummaryType === 2) return "小时";
    },
    // 选择区域（暂不实现）
    selectArea() {
      this.$message("选择区域");
    },
    // 点击事件，切换巡检类型
    changeInspectType(val) {
      this.flightSummaryType = val;
      //
      this.perDayTitle = flightPerDayTitle[val];
      this.totalTitle = flightSummaryTitle[val];
      this.perDayData = this.flightSummaryPerDayData[val];
      this.perDayUnit = this.flightSummaryPerDayUnit[val];
      this.totalData = this.flightSummaryTotalData[val];
      //
      this.setLineChartDate();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/style.scss";

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.flex_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title_bg {
  background-image: url("~@/assets/box_title_back1.png");
  background-size: 100% 100%;
  width: 100%;
  height: vh(30);
  margin: vh(5) auto;
  line-height: vh(30);
  font-size: 14px;
  color: white;

  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

  ::v-deep .el-input__inner {
    background-color: rgba(183, 178, 178, 0.2);
    color: white;
    width: 80px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    padding-right: 15px;
  }

  ::v-deep .el-input__icon {
    height: auto;
    line-height: 1;
  }

  .title_icon {
    width: vh(26);
    height: vh(26);
    padding: vh(2);
  }

  .title_name {
    // cursor: pointer;
    margin-left: vw(4);
  }

  .title_btn {
    line-height: vh(20);
    height: vh(20);
    text-align: center;
    margin-left: 4px;
    padding: vh(0) vw(8);
    border-radius: 4px;
    color: #00aaff;
    font-size: 12px;
    //padding: vh(0) vw(12);
    border: #00aaff 1px solid;
    cursor: pointer;
  }

  .title_btn_selected {
    background-color: darkcyan;
    color: white;
    border: grey 1px solid;
  }
}

.item_wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: vh(1);
  background-color: rgba(3, 53, 74, 0.8);
  padding: 4px 2px;

  .item {
    flex: 1;

    .item_icon {
      width: 40px;
      height: 40px;
      background-color: rgba(183, 178, 178, 0.15);
      padding: 4px;
      margin: 4px;
      border-radius: 4px;
    }

    .item_title {
      color: lightgray;
      align-self: start;
      font-size: 12px;
    }

    .item_content {
      font-family: ledFont;
      font-size: 25px;
      align-self: start;
      color: white;

      .item_unit {
        color: lightgray;
        font-size: 12px;
        align-self: start;
      }
    }
  }
}

.item_small_wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgba(3, 53, 74, 0.8);
  //background-color: #0D496A;
  padding: 2px 0;
  margin-top: 4px;

  .item {
    flex: 1;

    .item_icon {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }

    .item_title {
      color: lightgray;
      align-self: start;
      font-size: 12px;
    }

    .item_content {
      font-size: 15px;
      align-self: start;
      color: lightgray;
    }
  }
}

.content {
  padding: 10px;
  color: white;
  height: 100%;
  text-align: center;

  .block {
    height: 100%;
    display: flex;
    flex-direction: column;

    .date_filter {
      flex: 4;
      display: flex;
      color: lightgray;
      font-size: 12px;
      flex-direction: row;
      align-items: center;

      .area_wrap {
        cursor: pointer;

        .area_icon {
          width: 20px;
          height: 20px;
        }

        .area_text {
          width: 60px;
          color: lightgray;
        }
      }
    }

    .inspection_frequency {
      flex: 9;
      //height: 0;
      display: flex;
      flex-direction: column;
    }

    .chart_wrap {
      flex: 14;
      margin: 6px;
      padding: 0 4px 4px 4px;
      background: no-repeat center url("~@/assets/border/y2.png");
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .sub_title {
        font-size: 12px;
        padding-top: 4px;
        background: url("~@/assets/small_title_bg.png") no-repeat center;
        width: 200px;
        background-size: 100% 40%;
      }
    }

    .eventContainer {
      flex: 20;
      height: 0px;
      display: flex;
      flex-direction: column;
      .events {
        height: 84%;
        display: flex;
        flex-direction: column;
        .eventTitle {
          .eventContent1 {
            justify-content: center;
          }
        }
        .eventBody {
          height: 100%;
          overflow-y: scroll;
        }
        .eventMain {
          display: flex;
          padding: 4px 5px;
          color: lightgray;
          align-items: center;
          justify-content: center;
          .eventContent {
            flex: 2;
            color: #fff;
            font-size: 13px;
            &.eventContent1 {
              flex: 7;
              display: flex;
              .eventText {
                width: 100px;
              }
              .eventProgressBox {
                flex: 1;
                display: flex;
                text-align: start;
                justify-content: flex-start;
                align-items: center;
                .eventProgress {
                  border-radius: 20px;
                  .progress {
                    //-webkit-text-stroke: 0.8px black;
                    color: white;
                    padding: 1px 8px;
                    font-size: 12px;
                    background: linear-gradient(to right, #1cc1ff, white 100%);
                    border-radius: 20px;
                    width: 90%;
                  }
                }
              }
            }
          }
        }
      }
    }

    .efficiencyContainer {
      flex: 20;
      height: 0;
      display: flex;
      font-size: 13px;
      overflow-y: hidden;
      flex-direction: column;
      .efficiencyBody {
        display: flex;
        height: 100%;
        .efficiencyCard {
          flex: 1;
          margin: 3px;
          padding: 5px;
          border-radius: 5px;
          background-color: #16212c;
          display: flex;
          flex-direction: column;
          .efficiencyText {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            font-size: 12px;
          }
          .efficiencyPic {
            flex: 1;
            img {
              width: 100%;
            }
            .efficiencyPicText {
            }
          }
          .efficiencyPerson {
            font-size: 18px;
            color: #12afc0;
          }
          .efficiencySaving {
            font-size: 18px;
            color: #bd8309;
          }
          .efficiencyCarbon {
            font-size: 18px;
            color: #06ab30;
          }
        }
      }
    }

    .data_result {
      flex: 14;
      font-family: ledFont;

      .item_wrap2 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: vh(8);
        background-color: #0d496a;
      }
    }

    .noneData {
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 15px;
    }
  }
}

.full-mask {
  position: fixed;
  z-index: 20020;
  background-color: rgba(0, 0, 0, 0);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  box-sizing: inherit;
}
</style>
